
import React from 'react'
import { connect } from 'dva'
import { Form, Row, Col, Input, Cascader, Tag, Icon, DatePicker, Select, Card, Button, Upload, Modal, Divider, Radio, Popover, Checkbox } from 'antd'
const FormItem = Form.Item;
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './feedbackDetailStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import { isEmpty, isArray, cloneDeep, merge } from 'lodash'
import cx from 'classnames'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
const imageLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
}
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const { TextArea } = Input;
const routeView = function ({ dispatch, model, form, location }) {
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  const { modelObj, namespace } = model
  console.log("modelObj", modelObj)
  let { previewImages, previewImageSrc, previewVisible, detail } = modelObj

  const clickHandler = (e) => {
    dispatch({
      type: `${namespace}/xxx`,
      payload: {}
    });
  }
  const handlePreview = (e, idx) => {
    console.log(idx, previewImages[idx])
    dispatch({
      type: `${namespace}/updateModel`,
      payload: { previewVisible: true, previewImageSrc: detail.imgsUrl[idx] }
    });
  }
  const previewItems = detail.imgsUrl && isArray(detail.imgsUrl) && detail.imgsUrl.map((item, idx) => {
    return (
      <Col span={6} key={idx}>
        <Card >
          <img src={item} alt="" width='100%' onDoubleClick={(e) => handlePreview(e, idx)} />
        </Card>
      </Col>
    )
  })
  const handleCancel = () => {
    dispatch({
      type: `${namespace}/updateModel`,
      payload: { previewVisible: false }
    });
  }
  let { actionType } = location.query
  let arrTitle = { 'add': '新增意见反馈', "check": "查看意见反馈详情", "edit": "编辑意见反馈" }
  return (
    <div className={cx('pageLayout')}>
      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
        <img alt="example" style={{ width: '100%' }} src={previewImageSrc} />
      </Modal>
      {/*<Row type="flex" justify="space-between" className={cx('pageTitle')} >*/}
      {/*<Col>*/}
      {/*{arrTitle[actionType]}*/}
      {/*</Col>*/}
      {/*/!* <Col>*/}
      {/*<Button type='primary'>预览</Button>*/}
      {/*<Button type='primary' onClick={e=>submit(1)}>提交</Button>*/}
      {/*</Col> *!/*/}
      {/*</Row>*/}
      <div>
        <CollapsiblePanels title="意见反馈详情" hideUpDownBtn={true} >
            <Row>
                <Col span={10}>
                    <FormItem {...formItemLayout}
                              label="项目名称">
                        {getFieldDecorator('name', {
                            initialValue: detail.projectName,
                            rules: [
                                // { required: true, whitespace: true, message: '请选择姓名' },
                            ],
                        })(<Input
                            disabled={true}
                            placeholder={'请输入项目名称'}
                            onChange={(e) => { inputChange(e.target.value, 'name') }}
                        />)}
                    </FormItem>
                </Col>
                <Col span={10}>
                    <FormItem {...formItemLayout}
                              label="所属城市">
                        {getFieldDecorator('name', {
                            initialValue:`${detail.provinceName&&(detail.provinceName+' ')||''}${detail.cityName||''}` ,
                            rules: [
                                // { required: true, whitespace: true, message: '请选择手机号码' },
                            ],
                        })(<Input
                            disabled={true}
                            placeholder={'请输入所属城市'}
                            onChange={(e) => { inputChange(e.target.value, 'name') }}
                        />)}
                    </FormItem>
                </Col>
            </Row>
          <Row>
            {/*<Col span={10}>*/}
              {/*<FormItem {...formItemLayout}*/}
                {/*label="用户名">*/}
                {/*{getFieldDecorator('nickName', {*/}
                  {/*initialValue: detail.nickname,*/}
                  {/*rules: [*/}
                    {/*// { required: true, whitespace: true, message: '请选择用户名' },*/}
                  {/*],*/}

                {/*})(<Input*/}
                  {/*disabled={true}*/}
                  {/*placeholder={'请输入用户名'}*/}
                  {/*onChange={(e) => { inputChange(e.target.value, 'name') }}*/}
                {/*/>)}*/}
              {/*</FormItem>*/}
            {/*</Col>*/}
            <Col span={10}>
              <FormItem {...formItemLayout}
                label="姓名">
                {getFieldDecorator('name', {
                  initialValue: detail.name,
                  rules: [
                    // { required: true, whitespace: true, message: '请选择姓名' },
                  ],
                })(<Input
                  disabled={true}
                  placeholder={'请输入姓名'}
                  onChange={(e) => { inputChange(e.target.value, 'name') }}
                />)}
              </FormItem>
            </Col>
              <Col span={10}>
                  <FormItem {...formItemLayout}
                            label="手机号码">
                      {getFieldDecorator('name', {
                          initialValue: detail.mobile,
                          rules: [
                              // { required: true, whitespace: true, message: '请选择手机号码' },
                          ],
                      })(<Input
                          disabled={true}
                          placeholder={'请输入手机号码'}
                          onChange={(e) => { inputChange(e.target.value, 'name') }}
                      />)}
                  </FormItem>
              </Col>
          </Row>
          <Row>

            <Col span={10}>
              <FormItem {...formItemLayout}
                label="性别">
                {getFieldDecorator('name', {
                  initialValue: detail.sex,
                  rules: [
                    // { required: true, whitespace: true, message: '请选择性别' },
                  ],
                })(<Input
                  disabled={true}
                  placeholder={'请输入性别'}
                  onChange={(e) => { inputChange(e.target.value, 'name') }}
                />)}
              </FormItem>
            </Col>
              <Col span={10}>
                  <FormItem {...formItemLayout}
                            label="提交时间">
                      {getFieldDecorator('createTime', {
                          initialValue: (detail.createTime||'').split(' ')[0],
                          // rules: [
                          //   { required: true, whitespace: true, message: '提交时间' },
                          // ],
                      })(<Input
                          disabled={true}
                          placeholder={'请输入提交时间'}
                          onChange={(e) => { inputChange(e.target.value, 'createTime') }}
                      />)}
                  </FormItem>
              </Col>
          </Row>
          <Row>

            <Col span={10}>
              <FormItem {...formItemLayout}
                label="问题">
                {getFieldDecorator('name', {
                  initialValue: detail.content,
                  rules: [
                    // { required: true, whitespace: true, message: '请选择问题' },
                  ],
                })(<TextArea rows={4} disabled={true} />)}
              </FormItem>
            </Col>
          </Row>

        </CollapsiblePanels>
        <CollapsiblePanels title="图片" hideUpDownBtn={true} >
          <Row gutter={16}>
            {previewItems}
          </Row>
          {!isEmpty(previewItems)&&
          <Row style={{ marginTop: "2%", color: "#9e9d9d" }}>
            <Col >
              <span>请双击图片点击查看</span>
            </Col>
          </Row>
          }

        </CollapsiblePanels>
      </div>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))
